export class Swiper extends React.Component{
   state={
     currPage:0,
     start:true,
   }
   constructor(){
      super();
      //React.initializeTouchEvents(false);
   }
   componentDidMount(){
      clearTimeout();
      this.state.start=true;
      this.next();
   }

   componentWillUnmount() {
     clearTimeout();
     this.state.start=false;
    //React.initializeTouchEvents(false);
   }

   next=()=>{
      //alert("ddf")
       console.log("执行下翻");
      if(this.state.start){
         if(!this.i){
           this.i=1;
         }
         this.i+=5;
         let antime=30;
         this.rect.scrollLeft+=this.i;

         if(this.rect.scrollLeft>=this.state.currPage*this.rect.clientWidth){
             this.rect.scrollLeft=this.state.currPage*this.rect.clientWidth;
             console.log("页码",this.state.currPage)

             this.state.currPage++;
             this.setState({...this.state});
             this.i=1;

             antime=4000;
             //this.setState({...this.state});
         }
         if(this.state.currPage>=this.props.dataSource.length){
           this.state.currPage=0;
         }

         this.timeId=setTimeout(this.next,antime);
       }
   }

   goto=(page)=>{
     //alert(this.state.currPage);
     // console.log("gogo",page);
     this.state.start=false;
     this.i=1;
     if(this.timeId){
       clearTimeout(this.timeId);
     }else{
       clearTimeout();
     }

     if(this.state.currPage>page){
       //if(page!=0){
         this.state.currPage=page+1;
       //}else{
         //this.state.currPage=0;
      // }

       this.state.start=true;
       //this.setState({...this.state});
       this.priv();
     }else{
       this.state.currPage=page;
       this.state.start=true;
      // this.setState({...this.state});
       this.next();
     }


   }

   priv=()=>{
     console.log("执行上翻");
     if(this.state.start){
         let antime=30;
         if(!this.i){
           this.i=1;
         }
         this.i+=5;

         this.rect.scrollLeft-=this.i;
         console.log(this.state.currPage)

        if(this.rect.scrollLeft<=this.state.currPage*this.rect.clientWidth-this.rect.clientWidth){

            this.rect.scrollLeft=this.state.currPage*this.rect.clientWidth-this.rect.clientWidth;

            this.state.currPage--;
            this.setState({...this.state});
            console.log("页码",this.state.currPage)

            this.i=1;

            antime=4000;

        }

        // if(this.rect.scrollLeft===0){
        //    this.goto(this.props.dataSource.length-1);
        // }
        // if(this.state.currPage===0){
        //   this.state.currPage=0;
        //   this.setState({...this.state});
        // }


        if(this.state.currPage<=0){
           this.state.currPage=this.props.dataSource.length;
           //this.setState({...this.state});
           //this.state.currPage=this.props.dataSource.length-1;
        }

        this.timeId=setTimeout(this.priv,antime);
      }
   }
   circss=(page)=>{

       if(page===this.state.currPage){
          return "cricl-active";
       }
       return "cricl"


   }
   render(){
     let ele=[];
     let cricl=[];
     let page=0;
     this.props.dataSource.map(item=>{
        ele.push(<div className="item"  style={this.props.style}>{React.cloneElement(this.props.children, {dataSource:item})}</div>);
        //console.log(item);
        let p=page;
        cricl.push(<span className={this.circss(p)} onClick={()=>{
             this.goto(p);
        }} ></span>);
        page++;
     })

     return (
         <div className={"swiper "+this.props.css} style={this.props.style}>
            <div className="rect" ref={r=>this.rect=r} >
                 <div className="box">
                     {ele}
                 </div>

             </div>
             <div className="bar">
                 {cricl}
             </div>
         </div>
     )
   }
}
